<div class="p-side-navigation--icons" id="drawer-icons">
  <button class="p-side-navigation__toggle js-drawer-toggle" aria-controls="drawer-icons">
    Toggle side navigation
  </button>

  <div class="p-side-navigation__overlay js-drawer-toggle" aria-controls="drawer-icons"></div>

  <nav class="p-side-navigation__drawer" aria-label="Example side navigation with icons">
    <div class="p-side-navigation__drawer-header">
      <button class="p-side-navigation__toggle--in-drawer js-drawer-toggle" aria-controls="drawer-icons">
        Toggle side navigation
      </button>
    </div>

    <h3 class="p-side-navigation__heading">Group heading</h3>
    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--information p-side-navigation__icon"></i>First level link</a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--help p-side-navigation__icon"></i>First level link with status<div class="p-side-navigation__status"><i class="p-icon--error"></i></div></a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--user p-side-navigation__icon"></i>Link with children</a>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Second level link<div class="p-side-navigation__status"><i class="p-icon--warning"></i></div></a>
          </li>
          <li class="p-side-navigation__item">
            <span class="p-side-navigation__text">Second level text</span>
          </li>
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Second level link with children</a>
            <ul class="p-side-navigation__list">
              <li class="p-side-navigation__item">
                <span class="p-side-navigation__text">Third level text</span>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" href="#"><span class="u-truncate">Third level link with label that is truncated because it's long long long long long</span><div class="p-side-navigation__status">
                  <span class="p-chip--caution is-readonly is-inline is-dense">In progress</span>
                </div></a>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" aria-current="page" href="#">Third level active link</a>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" href="#">Third level link with status<div class="p-side-navigation__status"><i class="p-icon--success"></i></div></a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="p-side-navigation__item--title">
        <a class="p-side-navigation__link" href="#">Title that is a link</a>
      </li>
      <li class="p-side-navigation__item--title">
        <a class="p-side-navigation__link" href="#">Title with children</a>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Second level link</a>
          </li>
        </ul>
      </li>
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text"><i class="p-icon--collapse p-side-navigation__icon"></i>First level item that is not a link</span>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">First level link with a label<div class="p-side-navigation__status">
          <span class="p-chip--positive is-readonly is-inline is-dense">New</span>
        </div></a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><i class="p-icon--search p-side-navigation__icon"></i>First level link with a label is long and wraps wraps wraps wraps wraps wraps<div class="p-side-navigation__status">
          <span class="p-chip--information is-readonly is-inline is-dense">Updated</span>
        </div></a>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#"><span class="u-truncate">First level link with label that is truncated because it's long long long long long long long</span><div class="p-side-navigation__status">
          <span class="p-chip--positive is-readonly is-inline is-dense">Validated</span>
        </div></a>
      </li>
    </ul>

    <h3 class="p-side-navigation__heading--linked"><a class="p-side-navigation__link" href="#">Group heading linked</a></h3>
    <ul class="p-side-navigation__list">
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text">First level text</span>
      </li>
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text">Text item with children</span>
        <ul class="p-side-navigation__list">
          <li class="p-side-navigation__item">
            <a class="p-side-navigation__link" href="#">Second level link</a>
          </li>
          <li class="p-side-navigation__item">
            <span class="p-side-navigation__text">Second level text</span>
          </li>
          <li class="p-side-navigation__item">
            <span class="p-side-navigation__text">Second level text with children</span>
            <ul class="p-side-navigation__list">
              <li class="p-side-navigation__item">
                <span class="p-side-navigation__text">Third level text</span>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link is-active" href="#">Third level active item that is long and wraps wraps wraps wraps wraps wraps</a>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" href="#"><span class="u-truncate">Third level link that is truncated because it's long long long long long long long</span></a>
              </li>
              <li class="p-side-navigation__item">
                <a class="p-side-navigation__link" href="#">Third level link</a>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li class="p-side-navigation__item--title">
        <span class="p-side-navigation__text">Title that is not a link</span>
      </li>
      <li class="p-side-navigation__item">
        <span class="p-side-navigation__text">First level item that is not a link</span>
      </li>
      <li class="p-side-navigation__item">
        <a class="p-side-navigation__link" href="#">First level link</a>
      </li>
    </ul>
  </nav>
</div>
